<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href = "../css/bootstrap.min.css">
    <script type="application/javascript" src="../js/jquery-1.9.0.min.js"></script>
    <script type="application/javascript" src="../js/bootstrap.min.js"></script>
    <title>展开导航栏</title>
</head>
<body>
    <div class="container">
        <div class="panel-group" id="panelcontainer">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a href="#" data-toggle="collapse" data-target="#channel_demo1" data-parent="#panelcontainer">栏目管理1</a>
                    </h4>
                </div>
                <div class="collapse panel-collapse" id="channel_demo1">
                    <div class="panel-body">
                        <ul class="list-unstyled">
                            <li><a href="#">栏目1</a></li>
                            <li><a href="#">栏目1</a></li>
                            <li><a href="#">栏目1</a></li>
                        </ul>
                    </div>
                </div>


                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a href="#" data-toggle="collapse"  data-target="#channel_demo2" data-parent="#panelcontainer">栏目管理2</a>
                        </h4>
                    </div>
                </div>
                <div class="collapse panel-collapse" id="channel_demo2">
                    <div class="panel-body">
                        <ul class="list-unstyled">
                            <li><a href="#">栏目1</a></li>
                            <li><a href="#">栏目1</a></li>
                            <li><a href="#">栏目1</a></li>
                        </ul>
                    </div>
                </div>

                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a href="#" data-toggle="collapse" data-target="#channel_demo3" data-parent="#panelcontainer">栏目管理3</a>
                        </h4>
                    </div>
                </div>
                <div class="collapse panel-collapse" id="channel_demo3">
                    <div class="panel-body">
                        <ul class="list-unstyled">
                            <li><a href="#">栏目1</a></li>
                            <li><a href="#">栏目1</a></li>
                            <li><a href="#">栏目1</a></li>
                        </ul>
                    </div>
                </div>


            </div>

        </div>

    </div>
</body>
</html>